<!-- 我的帮助
使用方法：
在App.vue中
新增、列表、详情接口相同，不同事传参。新增path:'add'，列表path:'list'，详情path:'detail'
<mHelp v-if="token && showMHelp" :token="token" :api="CLOUD_CQJC+'feedback/'"></mHelp>
 -->
<template>
	<div class="m-help">
		<div class="m-help-handles">
	  	<div v-show="_d.block" class="handle-box" :class="{show: _d.open}">
	  		<a-tooltip placement="left">
		      <template #title>
		        <span>我要反馈</span>
		      </template>
		      <div class="btn" @click="showWant()">
		  			<question-circle-outlined />
					</div>
		    </a-tooltip>
		    <a-tooltip placement="left">
		      <template #title>
		        <span>我的反馈</span>
		      </template>
		      <div class="btn" @click="showList()">
		  			<unordered-list-outlined />
					</div>
		    </a-tooltip>
	  	</div>

	  	<a-tooltip placement="left">
	      <template #title>
	        <span>点击{{_d.open ? '收起' : '展开'}}支持操作</span>
	      </template>
	      <div class="btn" @click="setOpen(!_d.open)">
	      	<menu-unfold-outlined v-show="_d.open" />
	  			<menu-fold-outlined v-show="!_d.open" />
				</div>
	    </a-tooltip>
	  </div>

	  <feedbackWant ref="feedbackWantRef" 
	  	:types="props.types"
	  	:fieldNames="props.fieldNames"
	  	:tokenKey="props.tokenKey"
	  	:api="props.api"
	  	:instance="instance"></feedbackWant>
	  <feedbackMy ref="feedbackMyRef" 
	  	:types="props.types"
	  	:fieldNames="props.fieldNames"
	  	:tokenKey="props.tokenKey"
	  	:api="props.api"
	  	:instance="instance"></feedbackMy>
	</div>
	  
</template>

<script setup>
	import { reactive, ref, onMounted } from 'vue'
	import { MenuFoldOutlined, MenuUnfoldOutlined, QuestionCircleOutlined, UnorderedListOutlined } from '@ant-design/icons-vue';
	import feedbackWant from "./modules/feedbackWant.vue";
	import feedbackMy from "./modules/feedbackMy.vue";

	import {useUserStore} from '@/store/userStore'


	import axios from "axios";
	const instance = axios.create({
		baseURL: '/api',
		timeout: 100000,
	  headers: {
			"accepts": 'application/json',
		}
	});
	instance.interceptors.request.use(
	  config => {
	  	let token = useUserStore().token;
	    if (token) {
	      config.headers["token"] = token;
	    }
	    return config;
	  },
	  error => {
	    return Promise.reject(error);
	  }
	);

	const feedbackWantRef = ref();
	const feedbackMyRef = ref();

	const props = defineProps({
		// 反馈类型
		types: {
			type: Array,
			default: () => ([
				{label: '问题', value: 1},
				{label: '建议', value: 2},
			])
		},
		// 配置字段名称
		fieldNames: {
			type: Object,
			default: (rawProps) => {
				let def = {
					title: 'title',
					content: 'description',
					image: 'image',
				}
				return Object.assign(def, rawProps);
			}
		},
		// token
		token: {
			type: String
		},
		api: {
			type: String
		}
	})

	const _d = reactive({
		open: false,
		block: false
	})

	// 设置状态
	function setOpen(type) {
		if(type) {
			_d.block = true;
			setTimeout(() => {
				_d.open = true;
			}, 30);
		} else {
			_d.open = false;
			setTimeout(() => {
				_d.block = false;
			}, 200);
		}
	}

	// 显示我要反馈
	function showWant() {
		feedbackWantRef.value.open();
	}

	// 显示反馈列表
	function showList() {
		feedbackMyRef.value.open();
	}

</script>

<style lang="less" scoped>
.m-help {
	.m-help-handles {
		position: fixed;
		z-index: 500;
		bottom: 100px;
		right: 14px;

		.handle-box {
			position: absolute;
			z-index: 1;
			bottom: 0;
			left: 50%;
			margin-left: -20px;
			padding-bottom: 32px;
			transform: translateY(32px);
			opacity: 0;
			transition: all .2s;
			.btn {
				margin-bottom: 10px;
				width: 40px;
				height: 40px;
				line-height: 40px;
				font-size: 20px;
			}
			&.show {
				transform: translateY(0);
				opacity: 1;
			}
		}

		.btn {
			position: relative;
			z-index: 2;
			background: #fff;
			width: 32px;
			height: 32px;
			line-height: 32px;
			box-shadow: 0 46px 49px -2px rgb(19 41 75 / 15%), 0 14px 15px -2px rgb(19 41 75 / 14%), 0 6px 6px -2px rgb(19 41 75 / 14%), 0 2px 2px -2px rgb(19 41 75 / 13%);
			border-radius: 50%;
			cursor: pointer;
			text-align: center;
			font-size: 16px;
			color: #000;
			&:hover {
				background: #2b86ff;
				color: #fff;
			}
		}
	}
		
}
</style>